<!DOCTYPE html>
<html>

<head>
    <title>Microdot Web Socket Example</title>
    <script src="/static/jquery.min.js"></script>
    <script type="text/javascript">

        const socket = new WebSocket('ws://' + location.host + '/state')             // (1)

        // Web socket opened (connected) handler.
        socket.addEventListener('open', ev => {
            console.log("Connected to Server")
            $("#connected").html("Yes")
        })

        // Web socket closed (disconnected) handler.
        socket.addEventListener('closed', ev => {
            console.log("Disconnected from the Server")
            $("#connected").html("No")
        })

        // Web Socket message handler.
        socket.addEventListener('message', ev => {
            dataFromServer = ev.data
            console.log(dataFromServer)

            // string to JSON Object.
            data = JSON.parse(dataFromServer)

            // Update brightness % and slider on web page.
            if (data.level !== undefined) {
                $("input[type=range].brightnessLevel").val(data.level)
                $("#brightnessLevel").html(data.level)
            }

            // Update GPIO on web page
            if (data.gpio !== undefined) {
                $("#gpio").html(data.gpio)
            }
        })

        $(document).ready(function () {

            // Event listener for Slider value changes.
            $("input[type=range].brightnessLevel").on('input', function () {
                level = parseInt($(this).val())
                $("#brightnessLevel").html(level)
                payload = JSON.stringify({ "level": level })
                socket.send(payload)
            })
        });
    </script>
</head>

<body>
    <h1>Microdot Web Socket Example</h1>
    LED is connected to GPIO <span id="gpio">-</span><br>
    Connected to server: <span id="connected">No</span>
    <br><br>
    Brightness <span id="brightnessLevel"></span>:<br>
    <input type="range" min="0" max="100" value="0" class="brightnessLevel">
</body>

</html>